<template>
    <codemirror ref="myCm" v-model="editorValue" :extensions="cmOptions" style="height:100%;" :autofocus="true" :indent-with-tab="true" @ready="onCmReady">
    </codemirror>

</template>

<script setup>

import { Codemirror } from 'vue-codemirror'
import { javascript } from '@codemirror/lang-javascript'
import { json } from '@codemirror/lang-json'
import { css } from '@codemirror/lang-css'
import { oneDark } from '@codemirror/theme-one-dark'

const props = defineProps({
    /**内容 */
    modelValue: {
        type: [String],
        default: ''
    },
})
const emit = defineEmits(['update:modelValue',]);
const editorValue = computed({
    get: () => {
        return props.modelValue
    },
    set: (val) => {
        emit('update:modelValue', val)
    }
});

let cmOptions = ref([javascript(), oneDark])

const view = shallowRef()
let onCmReady = (cm) => {
    // view.value = cm.view
    // // 这里的 cm 对象就是 codemirror 对象，等于 this.$refs.myCm.codemirror 
    // cm.on("inputRead", (cm, obj) => {
    //     if (obj.text && obj.text.length > 0) {
    //         let c = obj.text[0].charAt(obj.text[0].length - 1)
    //         if ((c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z')) {
    //             cm.showHint({ completeSingle: false })
    //         }
    //     }
    // })
}

// let editorValue = ref(`console.log('hello work')`)
</script>

<style lang="scss" scope>
// :deep .CodeMirror-hints {
//     z-index: 2000 !important;
// }
</style> 